import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Button } from 'antd';
import { WeaSwitch } from 'comsMobx';
import {
  WeaLocaleProvider,
  WeaMoreButton,
  WeaDialog,
  WeaSearchGroup,
  WeaFormItem,
} from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('settingStore')
@observer
class Edit extends Component {
  constructor(props) {
    super(props);
    this.prefixCls = `${props.class}-edit`;
  }

  getForm = (form, fields) => {
    const { isFormInit } = form;
    let group = [];
    isFormInit &&
      fields &&
      fields.map((c) => {
        let items = [];
        c.items.map((field) => {
          items.push({
            com: (
              <WeaFormItem
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_WeaFormItem@431dbv@${field.domkey[0]}`}
                label={`${getLabel(field.labelID, field.label)}`}
                labelCol={{ span: `${field.labelcol}` }}
                wrapperCol={{ span: `${field.fieldcol}` }}
                className={`${this.prefixCls}-formItem ${field.domkey[0]}`}
                error={form.getError(field)}
                tipPosition="bottom"
              >
                <p
                  className={`${this.prefixCls}-title`}
                  title={getLabel(
                    384451,
                    '请输入一个邮箱地址或域名后缀，保存后该地址来信将自动转入垃圾箱：',
                  )}
                >
                  {getLabel(
                    384451,
                    '请输入一个邮箱地址或域名后缀，保存后该地址来信将自动转入垃圾箱：',
                  )}
                </p>
                <WeaSwitch
                  ecId={`${
                    (this && this.props && this.props.ecId) || ''
                  }_WeaSwitch@fki3xy@${field.domkey[0]}`}
                  fieldConfig={field}
                  form={form}
                />
                <p>{getLabel(384452, '如：mail@example.com，example.com')}</p>
              </WeaFormItem>
            ),
          });
        });
        group.push(
          <WeaSearchGroup
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaSearchGroup@91oeu6@${c.title}`}
            col={1}
            needTigger={true}
            showGroup={c.defaultshow}
            items={items}
          />,
        );
      });
    return group;
  };

  onCancel = () => {
    const {
      settingStore: { blackListStore },
    } = this.props;
    const { setStoreState, editForm } = blackListStore;
    setStoreState({ editVisible: false });
    editForm.resetForm();
  };

  onSave = () => {
    const {
      settingStore: { blackListStore },
    } = this.props;
    blackListStore.editSubmit(this.onCancel);
  };

  render() {
    const {
      settingStore: { blackListStore },
    } = this.props;
    const { editVisible, editForm, editFields } = blackListStore;
    const buttons = [
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@efp7fr@onsave`}
        type="primary"
        onClick={this.onSave}
      >
        {getLabel(30986, '保存')}
      </Button>,
      <WeaMoreButton
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_WeaMoreButton@jwfsrr@more`}
      />,
    ];
    return (
      <WeaDialog
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_WeaDialog@2vlq11`}
        icon="icon-coms-email"
        iconBgcolor="#a0b0ba"
        title={getLabel(83100, '添加黑名单')}
        style={{ width: 600, height: 135 }}
        className={this.prefixCls}
        visible={editVisible}
        onCancel={this.onCancel}
        buttons={buttons}
        hasScroll
      >
        {this.getForm(editForm, editFields)}
      </WeaDialog>
    );
  }
}

export default Edit;
